<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>尚品汇</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div id="wrap">
        <header id="header">
            <div class="header-top">
                <div class="header-top-content">
                    <div class="header-top-l">
                        <span>欢迎来到尚品汇！ 请</span><a href="#">登录</a>
                        <a href="#">注册</a>
                    </div>
                    <div class="header-top-r">
                        <a href="#">我的订单</a>
                        <a href="#">我的订单</a>
                        <a href="#">我的订单</a>
                        <a href="#">我的订单</a>
                        <a href="#">我的订单</a>
                        <a href="#">我的订单</a>
                        <a href="#">我的订单</a>
                        <a href="#">我的订单</a>
                    </div>
                </div>
            </div>
            <div class="header-bottom">
                <h1 id="logo"><a href="#"><img src="./images/Logo.png" alt="文件介绍"></a></h1>
                <div class="search">
                    <input type="text" name="" id="" placeholder="请输入搜索内容">
                    <input type="button" name="" id="" value="搜索">
                </div>
            </div>
        </header>
        <nav id="nav">
            <div class="nav-content">
                <h3><a href="#">全部商品分类</a></h3>
                <ul>
                    <li><a href="#">服装城</a></li>
                    <li><a href="#">服装城</a></li>
                    <li><a href="#">服装城</a></li>
                    <li><a href="#">服装城</a></li>
                    <li><a href="#">服装城</a></li>
                    <li><a href="#">服装城</a></li>
                </ul>
            </div>
        </nav>
        <div id="content">
            <!-- 面包屑导航 -->
            <div class="nav-path">
                <!-- <a href="#">手机数码</a>
                <span>/</span>
                <a href="#">手机</a>
                <span>/</span>
                <a href="#">Apple苹果</a>
                <span>/</span>
                <a >iphone 6S系</a> -->
            </div>
            <div class="good-picAdetail">
                <div class="good-picAdetail-l">
                    <div class="s-pic-box">
                        <img src="./images/s1.png" alt="">
                    </div>
                    <div class="pic-list">
                        <a class="prev" href="javascript:void(0);">&lt;</a>
                        <div class="ul-client">
                            <ul>
                                <!-- <li><img src="./images/s1.png" alt=""></li>
                                <li><img src="./images/s2.png" alt=""></li>
                                <li><img src="./images/s3.png" alt=""></li>
                                <li><img src="./images/s1.png" alt=""></li>
                                <li><img src="./images/s2.png" alt=""></li>
                                <li><img src="./images/s3.png" alt=""></li>
                                <li><img src="./images/s1.png" alt=""></li>
                                <li><img src="./images/s2.png" alt=""></li>
                                <li><img src="./images/s3.png" alt=""></li>
                                <li><img src="./images/s3.png" alt=""></li> -->
                            </ul>
                        </div>
                        <a class="next">&gt;</a>
                    </div>
                </div>
                <div class="good-picAdetail-r">
                </div>
            </div>
        </div>
    </div>
    <script src="./js/data.js"></script>
    <script>
        // 获取数据
        // console.log(goodData.path); //数组


        // 渲染商品详情页面数据
        renderGoodsDetailFn();
        function renderGoodsDetailFn(){
            // 1. 反单引号 ： `` 叫模版字符串
            // 特点：1. 可以回车 - 可以换行
            //       2. 支持字符串拼接
            // var str2 = "今天是"+2023218+"天气"+"晴";

            // 获取数据
            var goodsData = goodData.goodsDetail;
            // console.log(goodsData);

            // 获取显示数据区域
            var goodDetailBox = document.querySelector('.good-picAdetail-r');
            var str = `
                    <h3 class="good-detail-title">
                        ${goodsData.title}
                    </h3>
                    <p class="recommend">${goodsData.recommend}</p>
                    <div class="price-box">
                        <div class="price-box-row">
                            <h5>价&nbsp;&nbsp;&nbsp;&nbsp;格</h5>
                            <p>
                                <i>￥</i>
                                <span class="price">${goodsData.price}</span>
                                <a href="#">降价通知</a>
                                <strong>累计评价 ${goodsData.evaluateNum}</strong>
                            </p>
                        </div>
                        <div class="price-box-row">
                            <h5>促&nbsp;&nbsp;&nbsp;&nbsp;销</h5>
                            <p class="promoteBox">
                                <i class="addPrice">${goodsData.promoteSales.type}</i>
                                <span>${goodsData.promoteSales.content}</span>
                            </p>
                        </div>
                    </div>
                    <div class="support-box">
                        <p>
                            <i>支&nbsp;&nbsp;&nbsp;&nbsp;持</i>
                            <span>${goodsData.support}</span>
                        </p>
                        <p>
                            <i>配&nbsp;送&nbsp;至</i>
                            <span>${goodsData.address}</span>
                        </p>
                    </div>
                    <div class="crumb-box">
                        <div class="choose"></div>
                    </div>
                    <div class="cart-btnbox">
                        <div class="cart-btnbox-l">
                            <input class="numInp" type="text">
                            <a href="#">+</a>
                            <a href="#">-</a>
                        </div>
                        <button class="cart-btn">加入购物车</button>
                    </div>
            `;
            
            // 将字符串放入到div中显示
            goodDetailBox.innerHTML = str;
        }

        // 渲染配置选项数据
        renderGoodsCrumbFn()
        function renderGoodsCrumbFn(){
            // 1. 需要根据数据去添加dl到 crumb-box 元素上
            var crumbBox = document.querySelector('.crumb-box');
            // console.log(crumbBox);

            // 2. 添加多少个dl 取决于 crumbData长度
            var arr = goodData.goodsDetail.crumbData;
            // console.log(arr);

            arr.forEach(function(item,index){
                // 创建dl
                var oDl = document.createElement('dl');
                var oDt = document.createElement('dt');
                oDt.innerHTML = item.title;

                // 给dl添加对应下标属性
                oDl.setAttribute('index',index)

                // 插入dt
                oDl.appendChild(oDt);

                // 再循环
                item.data.forEach(function(item2,index2){
                    // console.log(item2);
                    var oDd = document.createElement('dd');
                    oDd.innerHTML = item2.type;
                    oDl.appendChild(oDd);
                });

                crumbBox.appendChild(oDl);

            })

        }


        // 给dd元素添加点击事件
        ddClickFn()
        function ddClickFn(){
            // 获取到所有的dd - 给它们添加点击事件
            var aDD = document.querySelectorAll('.crumb-box dd');
            var chooseBox = document.querySelector('.choose');
            // console.log(chooseBox);
            // console.log(aDD.length);

            // 获取配置项数据
            var goodDataArr = goodData.goodsDetail.crumbData;
            // console.log(goodDataArr);

            // 新建一个数组 - 个数 和配置项个数一致 
            // var arr = ['银色','256G','移动版',0];
            var chooseArr = new Array(goodDataArr.length);
            // 给数组添加默认值
            chooseArr.fill(0);
            // console.log(chooseArr);


            for(var i=0; i<aDD.length;i++){
                aDD[i].onclick = function(){

                    // 清空上一次创建的元素
                    chooseBox.innerHTML = '';
                    // 找到对应的dl当中dd ，把dd中的属性存入数组中。
                    // 获取到dd的父级 - 获取父级的下标
                    // console.log(this.parentNode.getAttribute('index'));

                    var oPar = this.parentNode;
                    var index = oPar.getAttribute('index');
                    var aSub = oPar.querySelectorAll('dd');
                    // console.log(aSub);
                    chooseArr[index] = this.innerHTML;

                     // 清空所有的颜色
                     for(var k=0;k<aSub.length;k++){
                        aSub[k].style.color='#666';
                     }
                    // 点击让dd变红
                    this.style.color = 'red';

                    console.log(chooseArr);

                    // 遍历chooseArr 数组 去根据数组 生成创建span标签
                    for(var j=0;j<chooseArr.length;j++){
                        if(chooseArr[j]){
                            // 创建一个span
                            var oSpan = document.createElement('span');
                            oSpan.className = 'mark';
                            oSpan.innerHTML = chooseArr[j];
                            var oX = document.createElement('i');
                            oX.innerHTML = 'X';
                            oSpan.appendChild(oX);
                            chooseBox.appendChild(oSpan);
                        }
                    }
                }
            }
        }


        // 放大镜 - 下部图片列表
        picListFn()
        function picListFn(){
            // 获取到ul 
            var ulBox = document.querySelector('.ul-client ul');

            // 创建li - 根据数据个数创建 - 循环
            var arr = goodData.imagessrc;
            // console.log(goodData.imagessrc.length);
            arr.forEach(function(item,index){
                // console.log(item);
                var oLi = document.createElement('li');
                var oImg = document.createElement('img');
                oImg.src = item.s;
                oLi.appendChild(oImg);
                 // 插入对应的li
                ulBox.appendChild(oLi);
            });
        }

        // 切换图片列表展示函数
        picRunFn()
        function picRunFn(){
            var nextBtn = document.querySelector('.next');
            var prevBtn = document.querySelector('.prev');
            // 获取单次移动距离
            var oUl = document.querySelector('.ul-client ul');
            var oLi = oUl.querySelectorAll('li');
            var oLiW = oLi[0].offsetWidth; //76px
            // console.log(oLi.offsetWidth);
            // 单次移动距离
            var onceL = oLiW * 2;
            // 当前移动距离
            var nowL = 0;
            // 获取最大移动距离  -  ul总宽 - 可视区（显示区域的宽）
            var maxL= oLiW * oLi.length - oLiW*5;

            // console.log(maxL);
            // console.log(maxL);
            nextBtn.onclick = function(){
                nowL +=onceL;
                if(nowL>=maxL){
                    nowL = maxL; 
                }
                oUl.style.marginLeft = - nowL + 'px';
            }
            prevBtn.onclick = function(){
                nowL -=onceL;
                console.log(nowL);
                if(nowL<=0){
                    nowL = 0; 
                }
                oUl.style.marginLeft = - nowL + 'px';
            }
        }


        // 声明图片下标全局变量
        var IMGINDEX = 0;

        // 点击小图 - 切换显示区域图片函数
        picChangeFn();
        function picChangeFn(){
            // 获取li 给它加点击事件
            var aLi = document.querySelectorAll('.ul-client ul li');

            // 获取到所有的图片
            var imgArr = goodData.imagessrc;
            // console.log(imgArr[0].s);
           
            aLi.forEach(function(item,index){
                item.onclick = function(){
                    // alert(index);
                    // 切换显示区域的小图片
                    var oSImg = document.querySelector('.s-pic-box img');
                    oSImg.src = imgArr[index].s;

                    // 不能直接 - 修改大图的路径 - 先记录保存小图对应的大图下标。
                    IMGINDEX = index;

                }
            })

        }

        // 面包屑导航实现数据插入
        navPathBind();
        function navPathBind() {
            var navPath = document.querySelector('.nav-path');
            var arr = goodData.path;
            for (var i = 0; i < arr.length; i++) {
                // 判断最后一个数组的对象- 不加span
                if (i === arr.length - 1) {
                    var aNode = document.createElement('a');
                    aNode.innerHTML = arr[i].title;
                    navPath.appendChild(aNode);
                } else {
                    // 创建a标签
                    var aNode = document.createElement('a');
                    var spanNode = document.createElement('span');
                    spanNode.innerHTML = '/';
                    aNode.innerHTML = arr[i].title;
                    aNode.href = arr[i].url;
                    navPath.appendChild(aNode);
                    navPath.appendChild(spanNode);
                }

            }
        }


        bigPicFn()
        // 放大镜实现
        function bigPicFn() {
            // 放大镜事件添加
            var sPicBox = document.querySelector('.s-pic-box');
            sPicBox.onmouseenter = function () {
                // 创建一个蒙板
                var mark = document.createElement('div');
                mark.className = 'mark';
                sPicBox.appendChild(mark);


                // 创建一个大的图片显示区域
                var bigPicBox = document.createElement('div');
                bigPicBox.className = 'b-pic-box';
                var goodPicAdetailL = document.querySelector('.good-picAdetail-l');
                goodPicAdetailL.appendChild(bigPicBox);


                // 获取数据中的图片数组列表
                var imgArr = goodData.imagessrc;
                // console.log(IMGINDEX);
                // 创建大图
                var bigImg = document.createElement('img');
                bigImg.src = imgArr[IMGINDEX].b;
                bigImg.className = 'big-pic';
                bigPicBox.appendChild(bigImg);


                // 当鼠标移动时-改变蒙板位置
                sPicBox.onmousemove = function (event) {
                    // 获取到鼠标的当前位置
                    // console.log(event.offsetX);

                    // console.log(event.pageX);

                    // 获取父级距离左侧距离
                    // console.log(sPicBox.offsetLeft);

                    // 获取蒙板的宽度
                    // console.log(mark.offsetWidth/2);

                    // 让蒙板跟着鼠标走

                    // console.log(sPicBox.offsetTop);
                    // console.log(sPicBox.getBoundingClientRect().top);//相对于可视取位置定位 - 上边距
                    // console.log(sPicBox.getBoundingClientRect().left);//相对于可视取位置定位 - 左边距
                    // console.log(event.clientY);//鼠标相对于可视取的上边距

                    var left = event.clientX - sPicBox.getBoundingClientRect().left - mark.offsetWidth / 2;
                    var top = event.clientY - sPicBox.getBoundingClientRect().top - mark.offsetHeight / 2;

                    // 判断移动范围是否超出放大镜区域
                    if (left <= 0) {
                        left = 0;
                    }
                    if (left >= sPicBox.offsetWidth - mark.offsetWidth) {
                        left = sPicBox.offsetWidth - mark.offsetWidth;
                    }
                    if (top <= 0) {
                        top = 0;
                    }
                    if (top >= sPicBox.offsetHeight - mark.offsetHeight) {
                        top = sPicBox.offsetHeight - mark.offsetHeight
                    }


                    mark.style.left = left + 'px';
                    mark.style.top = top + 'px';


                    //让大图跟着移动位置 - left - top

                    // 计算比例 = (小图区域大小 - 蒙版区域大小) / (大图片 - 大图显示区域大小);

                    var scale = (sPicBox.offsetWidth - mark.offsetWidth) / (bigImg.offsetWidth - bigPicBox.offsetWidth);

                    // console.log(scale);

                    // 通过比例计算大图移动的距离

                    bigImg.style.left = - left / scale + 'px';
                    bigImg.style.top = - top / scale + 'px';

                }

                sPicBox.onmouseleave = function () {
                    sPicBox.removeChild(mark);

                    goodPicAdetailL.removeChild(bigPicBox);

                    // 优化 - 删除鼠标移动和移出事件
                    sPicBox.onmousemove = sPicBox.onmouseleave = null;
                }
            }

        }    
    
        


    </script>
</body>

</html>